<template>
  <div class="system-settings">
    <div class="page-header">
      <h1>系统设置</h1>
      <p>配置系统参数和选项</p>
    </div>
    
    <el-card>
      <div class="placeholder-content">
        <el-icon size="64" color="#c0c4cc">
          <Setting />
        </el-icon>
        <h3>系统设置功能</h3>
        <p>此功能正在开发中，敬请期待...</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Setting } from '@element-plus/icons-vue'

export default {
  name: 'SystemSettings',
  components: {
    Setting
  }
}
</script>

<style lang="scss" scoped>
.system-settings {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .placeholder-content {
    text-align: center;
    padding: 60px 0;

    h3 {
      margin: 16px 0 8px;
      font-size: 20px;
      color: #606266;
    }

    p {
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }
}
</style>
